<template>
	<view class="content" :style="'background:#f7f7f7;'">
		<view class="create-view" :style="'background:#FFFFFF;'">
			<text class="font34 fontw500" :style="'width:100%;color:#111111;'">奖品码一行一个，最多10个！</text>
			<textarea class="textarea-class" :style="'background:#F7F7F7;'" @input="changeode" :value="code" :placeholder-style="'color:#AEAEAE;'" :placeholder="placeholder" />
		</view>
		<view class="save-btn" :style="'color:#FFFFFF;background:#E9564F;'" @click="backPage">
			<text>确认抽奖码</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				code:'',
				gift_index:'',
				placeholder:'例如：choujiangma-1 \n choujiangma-1',
				value:'',
				arrayValue:[]
			};
		},
		onShow() {
			this.gift_index = this.$store.state.gift_index
			this.code = this.$store.state.create_luttery_goods[this.gift_index].code
		},
		methods:{
			changeode(e){
				this.value = e.detail.value
				this.arrayValue = this.value.split('\n')
				this.code = e.detail.value
			},
			backPage(){
				if(this.arrayValue.length<=10){
					this.$store.commit("saveGiftCode",this.value)
					uni.navigateBack({})
				}else{
					uni.showToast({
						title:'最多输入10个抽奖码！',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.save-btn{
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		bottom: 30upx;
		width: 690upx;
		height: 80upx;
		font-size: 34upx;
		border-radius: 10upx;
		margin-bottom: 30upx;
	}
	.textarea-class{
		margin-top: 30upx;
		width: 100%;
		height: 440upx;
		border-radius: 8upx;
		box-sizing: border-box;
		padding: 30upx;
	}
	.create-view{
		width: 690upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30upx;
		box-sizing: border-box;
		border-radius: 20upx;
		margin-bottom: 30upx;
	}
	.content{
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 30upx;
		box-sizing: border-box;
		width: 750upx;
		min-height: 100vh;
	}
</style>
